<template>
  <div class="c-pf c-p-t0 c-maxw640 c-pz100 c-w100 coms-live-mod1-none">
    <template v-if="companyAuth && ((!companyAuth.companyTopNav || (companyAuth.companyTopNav && companyAuth.companyTopNav.length == 0)) || (companyAuth.companyTopNav && companyAuth.companyTopNav.style == 1))">
      <div class="nav c-flex-row c-justify-sb c-aligni-center c-ph24 c-bg-f2">
        <div class="c-ww40 J_coms-header-goback" @click="goBack">
          <div class="iconfont c-fs24">&#xe600;</div>
        </div>
        <div v-if="companyAuth && companyAuth.companyTopNav && companyAuth.companyTopNav.style == 1" class="c-flex-row c-aligni-center coms-live-iframe-none">
          <div v-for="(item, index) in companyAuth.companyTopNav.list" :key="index">
            <div v-if="isShow(item)" @click="goHref(item.itemType, item.href)" class="c-fc-xblack">
              {{item.name}}
              <span class="c-fc-e5e5e5 c-mh20" v-if="isShowLine(index, companyAuth.companyTopNav.list)">|</span>
            </div>
          </div>
        </div>
        <div v-if="companyAuth && (!companyAuth.companyTopNav || (companyAuth.companyTopNav && companyAuth.companyTopNav.length == 0))" class="c-flex-row c-aligni-center coms-live-iframe-none">
          <div v-for="(item, index) in defaultNav" :key="index">
            <div v-if="isShow(item)" @click="goHref(item.itemType, item.href)" class="c-fc-xblack">
              {{item.name}}
              <span class="c-fc-e5e5e5 c-mh20" v-if="isShowLine(index, defaultNav)">|</span>
            </div>
          </div>
        </div>
      </div>
    </template>
    <template v-if="companyAuth && companyAuth.companyTopNav && companyAuth.companyTopNav.style == 2 && companyAuth.companyTopNav.list">
      <div class="nav c-flex-row c-justify-sb c-aligni-center c-ph24 c-bg-fafafa">
        <div @click="goBack" class="J_coms-header-goback">
          <div class="iconfont c-fs24">&#xe600;</div>
        </div>
        <div class="c-flex-row c-aligni-center coms-live-iframe-none">
          <div v-for="(item, index) in companyAuth.companyTopNav.list" :key="index">
            <div v-if="isShow(item)" class="c-fc-xblack c-flex-row c-aligni-center c-ml30" @click="goHref(item.itemType, item.href)">
              <img :src="itemImg(item)" class="c-ww36 c-mr10 c-hh36"/>
              <span class="c-maxw104 c-text-ellipsis1 c-fs20">{{item.name}}</span>
            </div>
          </div>
        </div>
      </div>
    </template>
    <template v-if="companyAuth && companyAuth.companyTopNav && companyAuth.companyTopNav.style == 3 && companyAuth.companyTopNav.list">
      <div class="nav c-flex-row c-justify-sb c-aligni-center c-ph24 c-bg-fafafa">
        <div @click="goBack" class="J_coms-header-goback">
          <div class="iconfont c-fc-xblack c-fs28">&#xe648;</div>
        </div>
        <div v-if="companyAuth" class="c-flex-row c-aligni-center coms-live-iframe-none">
          <div v-for="(item, index) in companyAuth.companyTopNav.list" :key="index">
            <div class="c-fc-xblack c-fs30 iconfont c-flex-row c-aligni-center" :class="itemIconThree(item)" v-if="isShow(item)" @click="goHref(item.itemType, item.href)">
              <img :src="$addXossFilter(item.img)" v-if="item.img && item.img.length > 0" class="c-ww30 c-hh30">
              <span class="c-fc-e5e5e5 c-mh20" v-if="isShowLine(index, companyAuth.companyTopNav.list)">|</span>
            </div>
          </div>
        </div>
      </div>
    </template>
    <template v-if="companyAuth && companyAuth.companyTopNav && companyAuth.companyTopNav.style == 4 && companyAuth.companyTopNav.list">
      <div class="nav c-flex-row c-justify-sb c-aligni-center c-ph24 c-bg-fafafa">
        <template>
          <div v-if="companyAuth.companyTopNav.list && companyAuth.companyTopNav.list.filter(item => item['itemType']=='4').length != 0" class="coms-live-iframe-none">
            <div v-for="(item, index) in companyAuth.companyTopNav.list" :key="index">
              <router-link class="c-flex-row c-aligni-center" :to="{path:'/'}" v-if="item.itemType == 4">
                <span class="c-hh40 c-ww40 c-text-hidden c-br50 c-inlineblack c-mr10">
                  <img :src="item.img && item.img.length == 0 ? $addXossFilter(shareLogo) : $addXossFilter(item.img)" class="c-w100 c-h">
                </span>
                <span class="c-fs20 c-fc-sblack c-maxw104 c-text-ellipsis1">{{item.name && item.name.length == 0 ? companyAuth.companyName : item.name}}</span>
              </router-link>
            </div>
          </div>
          <div v-else class="c-ww40 J_coms-header-goback" @click="goBack">
            <div class="iconfont c-fs24">&#xe600;</div>
          </div>
        </template>
        <div class="c-flex-row c-aligni-center coms-live-iframe-none">
          <div v-for="(item, index) in companyAuth.companyTopNav.list" :key="index">
            <div class="c-fc-sblack c-flex-row c-aligni-center c-ml20" v-if="isShow(item) && item.itemType != 4" @click="goHref(item.itemType, item.href)">
              <i v-if="!item.img || (item.img && item.img.length == 0)" class="iconfont c-fc-gray c-fs28 c-mr10" :class="itemIconFour(item)"></i>
              <img v-if="item.img && item.img.length > 0" :src="$addXossFilter(item.img)" class="c-ww28 c-mr10 c-hh28">
              <span class="c-maxw104 c-text-ellipsis1 c-fs20">{{item.name}}</span>
            </div>
          </div>
        </div>
      </div>
    </template>
  </div>
</template>

<script>
import { utilJs } from "@/utils/common.js";
import { mapState } from 'vuex';
export default {
  name: 'Navtabbar',
  props: {
    companyAuth: {
      type: Object,
      default: () => {
        return {}
      },
    },
  },
  beforeCreate() {
  },
  data() {
    return {
      page: '',
      vipType: 1,
      companyAuth: null,
      shareLogo: localStorage.getItem('shareLogo'),
      hideHead: 'false',
      isiOS: false,
      companyId: localStorage.getItem('companyId'),
      vipUpUnShow: ['lae5'], //私人订制 -- 不显示升级会员的商家列表
      defaultNav: [
        {name: '关注', itemType: 1},
        {name: '推广', itemType: 2},
        {name: '升级会员', itemType: 3},
        {name: '首页', itemType: 4}
      ]
    }
  },
  created() {
    this.isiOS = navigator.userAgent.indexOf('IOSLogin') > -1 || navigator.userAgent.indexOf('IOSNewLogin') > -1 || navigator.userAgent.indexOf("IOSNewApp") > -1; //ios终端
  },
  mounted() {
    // 防止因为异步获取数据，数据未渲染到新数据
    setTimeout(() => {
      this.initData();
    }, 3000);
  },
  computed: {
    ...mapState({
      liveGlobalData: state => state.live.globalData,
    }),
    // 判断是否展示样式一和样式三的间隔线
    // 1、最后一个跳转不显示间隔线 2、最后一个是(推广\会员)并且当前在(推广\会员)页面，倒数第二个不展示间隔线以及对应跳转 3、最后一个是会员并且当前身份是vip级别以上的不显示间隔线以及会员跳转
    isShowLine() {
      return function (index, arr) {
        if (index == (arr.length - 1) ||
          (index == (arr.length - 2) && arr[arr.length - 1].itemType == 2 && this.page == 'SPREAD') ||
          (index == (arr.length - 2) && arr[arr.length - 1].itemType == 3 && this.page == 'VIP_UP_NEW') || (index == (arr.length - 2) && arr[arr.length - 1].itemType == 3 && this.vipType >= 2)) {
          return false;
        } else {
          return true;
        }
      }
    },
    isShow() { // 判断是否展示导航
      return function (item) {
        if (this.hideHead == 'true' && [0, 1, 2, 3].includes(item.itemType)) {
          return false;
        }
        if ((this.companyAuth.version == 1 && item.itemType == 1) ||
          (this.page != 'SPREAD' && item.itemType == 2) ||
          (this.vipType < 2 && this.page != 'VIP_UP_NEW' && this.isiOS == false && !this.vipUpUnShow.includes(this.companyId) && item.itemType == 3) || // 张法定制的，隐藏顶部导航栏
          [0, 4, 5].includes(item.itemType)
        ) {
          return true;
        }
      }
    },
    itemImg() { // 样式二获取图片
      return function (item) {
        if (item.img && item.img.length > 0) {
          return this.$addXossFilter(item.img)
        } else {
          return (item.itemType == 0 ? this.$addXossFilter(require('@/assets/tabbarCustom.png'))
            : (item.itemType == 1 ? this.$addXossFilter(require('@/assets/tabbarShowQr.png'))
            : (item.itemType == 2 ? this.$addXossFilter(require('@/assets/tabbarSpread.png'))
            : (item.itemType == 3 ? this.$addXossFilter(require('@/assets/tabbarVip.png'))
            : (item.itemType == 4 ? this.$addXossFilter(require('@/assets/tabbarHome.png')) : this.$addXossFilter(require('@/assets/tabbarMember.png')))))))
        }
      }
    },
    itemIconThree() { // 样式3icon
      return function (item) {
        if (item.img && item.img.length > 0) {
          return;
        }
        return (item.itemType == 0 ? 'icon-chanpin'
          : (item.itemType == 1 ? 'icon-guanzhu'
          : (item.itemType == 2 ? 'icon-tuiguang'
          : (item.itemType == 3 ? 'icon-huiyuan12'
          : (item.itemType == 4 ? 'icon-shouye3' : 'icon-ren')))))
      }
    },
    itemIconFour() { // 样式4icon
      return function (item) {
        return (item.itemType == 0 ? 'icon-ziliao2'
          : (item.itemType == 1 ? 'icon-guanzhu7'
          : (item.itemType == 2 ? 'icon-lujing151'
          : (item.itemType == 3 ? 'icon-huiyuan3'
          : (item.itemType == 5 ? 'icon-wode-xuanzhong' : '')))))
      }
    }
  },
  watch: {
    $route(to, from) {
      this.initData();
      //在推广页面不显示推广菜单
      if (to.path == '/homePage/spread/spreadIndex') {
        this.page = 'SPREAD';
      } else if (to.path == '/member/vip/vipUpNew') {
        this.page = 'VIP_UP_NEW';
      } else {
        this.page = 'OTHRE';
      }
      if (this.liveGlobalData.openFromBy == 1) {
        clearTimeout(this._gobackTimer);
        this._gobackTimer = setTimeout(() => {
          let gobackElem = document.querySelector(".J_coms-header-goback");
          if (!gobackElem) return;
          if (to.query.openFromBy == 1) {
            gobackElem.classList.add('hide');
          } else {
            gobackElem.classList.remove('hide');
          }
        }, 500)
      }
    }
  },
  methods: {
    initData() {
      this.isiOS = navigator.userAgent.indexOf('IOSLogin') > -1 || navigator.userAgent.indexOf('IOSNewLogin') > -1 || navigator.userAgent.indexOf("IOSNewApp") > -1; //ios终端
      this.hideHead = localStorage.getItem('hideHead') || 'false';
      this.vipType = localStorage.getItem("vipType" + localStorage.getItem("userId")) || 1;
      this.companyId = localStorage.getItem('companyId');
    },
    goHref(type, href) {
      if (type == 1) {
        let data = { eventId: 'AttentionQr' }
        window.ckjrReportData(data)
        this.$store.commit('updateShowAttentionQr', true);
      } else if (type == 2) {
        if (localStorage.getItem("enableBindPhoneInHead") == 1 && (!localStorage.getItem("uMobile") || localStorage.getItem("uMobile") == undefined)) {
          if (utilJs.goBindMobile()) return;
        }
        this.$routerGo(this, "push", { path: '/homePage/spread/spreadIndex' });
      } else if (type == 3) {
        this.$routerGo(this, "push", { path: '/member/vip/vipUpNew' });
      } else if (type == 4) {
        this.$routerGo(this, "push", { path: '/' });
      } else if (type == 5) {
        this.$routerGo(this, "push", { path: '/member/memberIndex' });
      } else if (type == 0) { // 自定义跳转
        utilJs.locationHref(href);
      }
    },
    goBack() {
      setTimeout(() => {
        window.history.length > 1 ? this.$router.go(-1) : this.$routerGo(this, "push", { path: '/' });
      }, 100);
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.nav {
  height: 1.7rem;
  width: 100%;
  color: #333333;
  font-size: 0.55rem;
}
.c-mh20 {
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}
.c-mh30 {
  margin-left: 0.85rem;
  margin-right: 0.85rem;
}
.c-fc-e5e5e5 {
  color: #e5e5e5;
}
.c-bg-fafafa {
  background-color: #fafafa;
}
.c-maxw104 {
  max-width: 2.6rem;
}
</style>
